<template>
  <div :key="pageKey">
      <div class="showView" :id="(!fileState)? 'bigger':''">
        <div id="showul">
        <ul>
          <li v-for="(obj,i) in cardList" :key="obj.id" :class="getColor(i)">
            <div class="shang">
              <div class="shang-left">
              <div :class="'selectCircle ' + (obj.selected ? 'onCheck' : 'noCheck')" @click="clickItemCheck(i)" v-show="fileState"></div>
              <div class="cardTitle">{{obj.title}}</div>
              <img src="../../../assets/img/icon/jiantou.png" @click="clickJiantou(i)">
              </div>
              <div class="shang-right">
                {{obj.mark}}
              </div>
            </div>
            <div class="xia">
              <div id="cardText">{{obj.content}}</div>
            </div>
          </li>
        </ul>
        </div>
        <div class="bottomBar" v-show="fileState">
          <div class="bottomSelectAll">
            <div :class="'selectAllCircle ' + (checkAll ? 'onCheck1': '')" :id="(checkAll ? 'noBorder': '')" @click="clickCheakAll"></div>
            全选
          </div>
          <div class="bottomButtom" @click="clickDeletBottom">
            删除<span v-if="checkedCards.length">({{checkedCards.length}})</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import config from '../../../../vue.config'
import certificationServices from "@/service/certification";
export default {
  name: 'Passed',
  data () {
    return {
      pageKey: 0,
      baseUrl: config.devServer.proxy['/student'].target + '/studentevaluation/api/otheract/',
      cardList: [
        // {
        //   id: 1,
        //   title: '校报派发员实践证明',
        //   content: '华南农业大学党宣传部校报派发员勤工助学奖学金',
        //   mark: 0.1,
        //   selected: false,
        //   url: '',
        //   appeal: '',
        //   name: '',
        //   number: ''
        // },
        // {
        //   id: 2,
        //   title: '助理证明',
        //   content: '兹证明11名同学2018年11月1日至2019年2月100日',
        //   mark: 0.5,
        //   selected: false,
        //   url: '',
        //   appeal: '',
        //   name: '',
        //   number: ''
        // },
        // {
        //   id: 3,
        //   title: '华南农业大学勤工助学岗位科技处证明',
        //   content: '华南农业大学科技处办公室助理勤工助学岗位',
        //   mark: 0.1,
        //   selected: false,
        //   url: '',
        //   appeal: '',
        //   name: '',
        //   number: ''
        // },
        // {
        //   id: 4,
        //   title: '校报派发员实践证明',
        //   content: '华南农业大学党宣传部校报派发员勤工助学奖学金',
        //   mark: 1.0,
        //   selected: false,
        //   url: '',
        //   appeal: '',
        //   name: '',
        //   number: ''
        // }
      ],
      checkedCards: [],
      checkAll: false
    }
  },
  methods: {
    clickItemCheck: function (i) {
      this.cardList[i].selected = !this.cardList[i].selected
      if (this.cardList[i].selected) {
        this.checkedCards.push(this.cardList[i])
        if (this.cardList.length == this.checkedCards.length) {
          this.checkAll = true
        }
      } else {
        var id = this.cardList[i].id
        this.checkAll = false
        for (var j = 0; j < this.checkedCards.length; j++) {
          if (id == this.checkedCards[j].id) {
            this.checkedCards.splice(j, 1)
            break
          }
        }
      }
      console.log(this.checkedCards)
    },
    getColor: function (i) {
      var x = i % 3
      if (x == 0) return 'purple'
      else if (x == 1) return 'yellow'
      else return 'red'
    },
    clickCheakAll: function () {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        for (var i = 0; i < this.cardList.length; i++) {
          this.cardList[i].selected = true
        }
        this.checkedCards = this.cardList.slice(0)
      } else {
        for (var i = 0; i < this.cardList.length; i++) {
          this.cardList[i].selected = false
          this.checkedCards = []
        }
      }
      console.log(this.checkedCards)
    },
    clickDeletBottom: function () {
      // 判断是否为空
      if (this.checkedCards.length == 0) {
        console.log('选中为空')
        return
      }
      this.$store.commit('setShowDeletWindow', true)
      this.$store.commit('changeCoverableState', true)
    },
    clickJiantou: async function (i) {
      var obj = this.cardList[i]
      if (obj.from === '社团') {
        // 社团提交的, 显示excel
        let result = await certificationServices.getActStudentsByActId(obj.actId)
        result = result.data.data
        result.unshift({
          name: '姓名',
          studentId: '学号',
          college: '学院'
        })
        let json = {
          name: 'excelview',
          params: {
            title: obj.title,
            content: result
          }
        }
        this.$router.push(json)
        return
      }
      // 如果是个人提交的, 显示图片
      var info = {
        url: obj.url,
        title: obj.title,
        content: obj.content,
        appeal: obj.appeal,
        name: obj.name,
        number: obj.number
      }
      this.$store.commit('setInfo', info)
    }
  },
  computed: {
    fileState: function () {
      return this.$store.state.fileState
    },
    active: function () {
      return this.$store.state.action
    }
  },
  watch: {
    active (o, n) {
      console.log(this.checkedCards)
      // 删除操作
      for (var i = 0; i < this.checkedCards.length; i++) {
        var obj = this.checkedCards[i]
        // lyl：cloud版本
        axios({
          url: '/studentevaluation/api/exam/delete',
          method: 'delete',
          params: {
            college: this.$store.getters.getLoginUser.collegeName,
            from: obj.from,
            id:obj.actId
          }
        }).then(res => {
          for (var i = 0; i < this.cardList.length; i++) {
            if (this.cardList[i].id == obj.id) {
              this.cardList.splice(i, 1)
            }
          }
        })
        this.pageKey++
      }
    }
  },
  mounted () {
    var count = 1
    this.cardList = []
    axios({
      // 更新为cloud版本
      url: '/studentevaluation/api/exam/hello',
      methods: 'get',
      params: {
        userName: this.$store.getters.getLoginUser.collegeName
      }
    }).then(res => {
      console.log("---------------hello---------------")
      console.log(res)
      console.log("---------------hello---------------")
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        if (obj.passed == true && obj.deleted == false && obj.examed) {
          this.cardList.push(
            // id: 1,
            // title: '校报派发员实践证明',
            // content: '华南农业大学党宣传部校报派发员勤工助学奖学金',
            // mark: 0.1,
            // selected: false,
            // url: '',
            // appeal: '',
            // name: '',
            // number: ''
            {
              actId: obj.actId,
              id: count++,
              title: obj.actName,
              selected: false,
              name: obj.organization,
              number: obj.uploaderId,
              content: obj.actTip,
              url: null,
              appeal: '',
              mark: obj.mark,
              from: '社团'
            }
          )
        }
      }

      ++this.pageKey
    })
    axios('/studentevaluation/api/exam/helloOther?college=' + this.$store.getters.getLoginUser.collegeName).then(res => {
      console.log('---------------helloOther-----------------')
      console.log(res)
      console.log('---------------helloOther-----------------')
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        if (obj.otherActDO.isPassed == true && obj.deleted == false && obj.otherActDO.isChecked) {
          this.cardList.push(
            // id: 1,
            // title: '校报派发员实践证明',
            // content: '华南农业大学党宣传部校报派发员勤工助学奖学金',
            // mark: 0.1,
            // selected: false,
            // url: '',
            // appeal: '',
            // name: '',
            // number: ''
            {
              actId: obj.otherActDO.id,
              id: count++,
              title: obj.otherActDO.otherActName,
              selected: false,
              name: '',
              number: obj.otherActDO.studentId,
              content: obj.otherActDO.otherActName,
              url: obj.otherActDO.otherActImageUrl,
              appeal: obj.otherActDO.additionalBasis,
              from: '个人',
              mark: obj.mark
            }
          )
          this.$store.state.Enumber.passedNum = this.cardList.length
          // var Enumber = {
          //   nopassNum: this.$store.state.nopassNum,
          //   passedNum: this.cardList.length,
          //   stu: 0,
          //   college: 0,
          //   asso: 0,
          //   all: 0
          // }
          // this.$store.commit('setEnumber',Enumber)
        }
      }
    })
  }
}
</script>

<style scoped lang="scss">
  #showul{
    width: 100%;
    height: calc(100% - #{px2rem(54)});
    //height: 100%;
    overflow-y: scroll;
  }
  .showView {
    width: 100%;
    height: 100%;
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      list-style: none;

      li {
        background: white;
        width: px2rem(337);
        height: px2rem(77);
        margin-top: px2rem(10);
        display: flex;
        flex-direction: column;
        border-radius: px2rem(6);
        .shang{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shang-left{
            display: flex;
            width: 100%;
            height: px2rem(44);
            align-items: center;
            font-size:px2rem(18);
            font-family:PingFang SC;
            font-weight:800;
            line-height:px2rem(25);
            color:rgba(51,51,51,1);
            .selectCircle{
              width: px2rem(44);
              height: px2rem(44);
            }
            .cardTitle{
              max-width: px2rem(216);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            img{
              width: px2rem(10);
              height: px2rem(18);
              margin-left: px2rem(5);
            }
          }
          .shang-right{
            font-size:px2rem(20);
            font-family:SF Pro Text;
            font-weight:bold;
            line-height:px2rem(20);
            color:rgba(2,164,237,1);
            margin-right: px2rem(14);
          }
        }
        .xia{
          font-size:px2rem(14);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(20);
          color:rgba(153,153,153,1);
          #cardText{
            max-width: px2rem(270);
            margin-left: px2rem(44);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .bottomBar{
    width: 100%;
    height: px2rem(54) ;
    background: white;
    font-size:px2rem(14);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(20);
    position: fixed;
    /*top: px2rem(556);*/
    bottom: px2rem(55);
    display: flex;
    align-items: center;
    .bottomSelectAll{
      width: px2rem(58);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: px2rem(36);
      color:rgba(38,38,38,1);
      .selectAllCircle{
        width: px2rem(20);
        height: px2rem(20);
        border-radius: 50%;
        border: px2rem(1) solid rgba(112,112,112,1);
      }
    }
    .bottomButtom{
      width: px2rem(90);
      height: px2rem(44);
      margin-left: px2rem(179);
      background: url("../../../assets/img/icon/uploader_file_btn_sub.svg");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color:rgba(255,255,255,1);
    }
  }
  .onCheck{
    background: url("../../../assets/img/icon/file_rb_s.svg");
    background-size: 100% 100%;
  }
  .noCheck{
    background: url("../../../assets/img/icon/file_rb_n.svg");
    background-size: 100% 100%;
  }
  .purple{
    border-left: px2rem(5) solid #aa7cec;
  }
  .yellow{
    border-left: px2rem(5) solid #fec906;
  }
  .red{
    border-left: px2rem(5) solid #fc6985;
  }
  .onCheck1{
    /*background: #02A4ED;*/
    background: url("../../../assets/img/icon/file_rb_s.svg") center center no-repeat;
    background-size:px2rem(44) px2rem(44);
  }
  #noBorder{
    border: white;
  }
  #bigger{
    height: 100%;
    }

</style>
